<template>
  <div id="app">
    <!-- 表单区域 -->
    <el-card  class="box-card"   style="width: 800px;margin-top: 100px;margin-left: 100px" shadow="hover">
    <el-form ref="form" :model="formData" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="车型">
            <el-select v-model="formData.carType" placeholder="请选择车型">
              <el-option label="选项1" value="shanghai"></el-option>
              <el-option label="选项2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车号">
            <el-input v-model="formData.carNumber"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="端号">
            <el-select v-model="formData.portNumber" placeholder="请选择端号">
              <el-option label="选项1" value="shanghai"></el-option>
              <el-option label="选项2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="formData.date" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="故障">
            <el-select v-model="formData.failure" placeholder="请选择故障类型">
              <el-option label="选项1" value="shanghai"></el-option>
              <el-option label="选项2" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="故障现象描述">
            <el-input type="textarea" v-model="formData.failureDescription"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="故障处理方法描述">
            <el-input type="textarea" v-model="formData.solutionDescription"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="照片">
            <el-upload action="/api/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6" :offset="9">
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-col>
        <el-col :span="6">
          <el-button @click="resetForm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        carType: '',
        carNumber: '',
        portNumber: '',
        date: '',
        failure: '',
        failureDescription: '',
        solutionDescription: ''
      },
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    submitForm() {
      // 提交表单逻辑...
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.el-form {
  margin-top: 20px;
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
